<template>
	<view class="setInput_page">
		<!-- <view class="head">
			<Header
				titleName="修改登录密码"
				rightText="保存"
				@onRightText="preserve"
			></Header>
		</view> -->

		<view class="setUserNick_content">
			<view class="input_box">
				<view class="setUserNick_input_item">
					<view class="item_input">
						<input type="text" :maxlength="20" placeholder="请输入手机号" placeholder-class="placeholder" v-model="phone" />
					</view>
				</view>

				<view class="setUserNick_input_item">
					<view class="item_input">
						<input type="text" :maxlength="20" placeholder="请输入验证码" placeholder-class="placeholder" v-model="phoneCode" />
					</view>
					<view class="codeBtn">
						<view v-if="setVerifyShow == 0" @click="getVerify">
							{{setVerifyText}}
						</view>
						<view v-if="setVerifyShow == 1">
							{{setVerifyText}}
						</view>

					</view>
				</view>
				<view class="setUserNick_input_item">
					<view class="item_input">
						<input type="text" :password="true" :maxlength="20" placeholder="请输入密码" placeholder-class="placeholder" v-model="newPwd" />
					</view>
				</view>
				<view class="setUserNick_input_item">
					<view class="item_input">
						<input type="text" :password="true" :maxlength="20" placeholder="请确认密码" placeholder-class="placeholder" v-model="newPwds" />
					</view>
				</view>


			</view>
			<view class="tips">
				由6 ~ 20字母、数字组成
			</view>
			<view class="btn" @click="preserve">
				保存
			</view>
		</view>
	</view>
</template>

<script>
	import Api from '@/common/api';
	export default {
		data() {
			return {
				setVerifyShow: 0, // 是否重新发送验证码
				setVerifyText: "获取验证码",
				phoneCode: "", // 验证码
				newPwd: "", // 新密码
				newPwds: "", // 确认新密码
				verify: {
					phoneCode: /^\d+$/, // 纯数字的正则
					pwd: /^[0-9A-Za-z]{6,20}$/, // 密码正则
				},
				phone: ''

			};
		},

		methods: {

			/**
			 * 获取验证码
			 */
			async getVerify() {
				var that = this;
				that.setVerifyShow = 1;
				// 执行倒计时
				that.senCode();
				let params = {
					phone: this.phone
				};
				let data = await Api.apiCall('post', Api.index.sendCodes, params);
				//console.log('获取的验证码', data);
			},

			/**
			 * 60秒倒计时
			 */
			senCode() {
				var timer_num = 60;
				var time = setInterval(() => {
					timer_num--;
					this.setVerifyText = "重新发送(" + timer_num + ")";

					if (timer_num == 0) {
						clearInterval(time)
						this.setVerifyText = "获取验证码"
						this.setVerifyShow = 0
					}
				}, 1000)
			},

			/**
			 * 保存 设置支付密码
			 */
			async preserve() {
				var that = this
				// 请输入验证码
				if (that.phoneCode == '') {
					uni.showToast({
						icon: "none",
						// image: "/static/image/icon/icon_reminder.png",
						title: '请输入验证码',
						duration: 2000
					})
					return false;
				}

				// 请输入新密码
				if (that.newPwd == '') {
					uni.showToast({
						icon: "none",
						// image: "/static/image/icon/icon_reminder.png",
						title: '请输入新密码',
						duration: 2000
					})
					return false;
				}

				// 请再次输入新密码
				if (that.newPwds == '') {
					uni.showToast({
						icon: "none",
						// image: "/static/image/icon/icon_reminder.png",
						title: '请再次输入新密码',
						duration: 2000
					})
					return false;
				}

				// 判断验证码格式是否正确
				if (!that.verify.pwd.test(that.phoneCode)) {
					uni.showToast({
						icon: "none",
						// image: "/static/image/icon/icon_reminder.png",
						title: '请输入正确的验证码',
						duration: 2000
					})
					return false;
				}

				// 判断密码格式是否正确
				if (!that.verify.pwd.test(that.newPwd)) {
					uni.showToast({
						icon: "none",
						// image: "/static/image/icon/icon_reminder.png",
						title: '请输入正确格式的密码',
						duration: 2000
					})
					return false;
				}

				// 判断两次输入的密码是否相同
				if (that.newPwd == that.newPwds) {
					that.newPwds = that.newPwds.replace(/\s+/g, "");
					let params = {
						phone: this.phone,
						paypwd: this.newPwd,
						confimpaypwd: this.newPwds,
						authCode: this.phoneCode
					};
					let data = await Api.apiCall('post', 'single/user/resetPaypwd', params);
					uni.showToast({
						icon:'none',
						title: data
					})
					
				} else {
					uni.showToast({
						icon: "none",
						// image: "/static/image/icon/icon_reminder.png",
						title: '两次请输入的密码不一致',
						duration: 2000
					})
				}

			}
		}
	}
</script>

<style lang="scss">
	// @import "../../../assets/scss/variable.scss";
	// @import "../../../assets/scss/mixin.scss";

	.setInput_page {
		width: 100%;
		height: 100vh;
		background-color: #F8F8F8;
		.head {
			background-color: #FFFFFF;
		}

		.placeholder {
			font-size: 36upx;
		}

		.setUserNick_content {
			.input_box {
				background-color: #fff;
			padding: 20upx;
				.setUserNick_input_item {
					width: 100%;
					height: 100upx;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.item_input,
					.codeBtn {
						margin-top: 60upx;
						margin-bottom: 30upx;
					}

					.item_input {
						flex: 1;

						input {
							width: 100%;
							height: 100%;
							font-size: 36upx;
						}
					}

					.codeBtn {
						margin-left: 20upx;
						font-size: 32upx;
					}
				}
			}

			.tips {
				// @include paddingLR();
				margin-top: 20upx;
				font-size: 26upx;
			}

			.btn {
				width: 60%;
				text-align: center;
				margin: 20upx 20%;
				padding: 10upx 80upx;
				background-color: #AE1D24;
				font-size: 36upx;
				color: #FFFFFF;
				border-radius: 60upx;
			}
		}

	}
</style>
